<html>
<head>
    <title>用户管理</title>
    <!-- 引入layui框架的CSS样式 -->
    <link href="/lib/layui/css/layui.css" rel="stylesheet"/>
</head>
<body>

<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top:15px">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input id="input1" type="text" lay-affix="clear" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input id="input2" type="text" lay-affix="clear" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select id="select1">
                    <option value="">所有</option>
                    <option value="0" selected>正常</option>
                    <option value="1">锁定</option>
                    <option value="-1">删除</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <button id="searchBtn" type="button" class="layui-btn">
                <i class="layui-icon layui-icon-search"></i>
                查询
            </button>
            <button id="addBtn" type="button" class="layui-btn">
                <i class="layui-icon layui-icon-add-circle"></i>
                新增
            </button>
            <button id="delBtn" type="button" class="layui-btn">
                <i class="layui-icon layui-icon-reduce-circle"></i>
                删除
            </button>
        </div>
    </div>
</form>

<table id="pTable"></table>

<!-- 弹出窗口的模版 -->
<script id="template1" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">
        <div class="layui-form-item" style="margin-top:15px">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="id"/>
                    <input id="username" type="text" name="username" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div id="passwordDIV" class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-inline">
                    <img id="avatarImg" width="50px" height="50px"/>
                    <input id="avatarInput" type="hidden" name="avatar" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="reset" value="重置" class="layui-btn layui-btn-primary"/>
                <input type="button" id="saveBtn" value="保存" class="layui-btn"/>
            </div>
        </div>
    </form>
</script>

<!-- 表格操作模版 -->
<script id="template2" type="text/html">
    <input lay-event="edit" type="button" class="layui-btn layui-btn-xs" value="编辑"/>
    <input lay-event="delete" type="button" class="layui-btn layui-btn-xs layui-bg-red" value="删除"/>
</script>

<script src="/lib/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script type="text/javascript" th:inline="none">
    //告诉浏览器加载layui框架中的哪些组件
    //加载完小组件　就执行function
    layui.use(['table', 'layer', 'form', 'upload'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        var upload = layui.upload;


        //批量删除
        $("#delBtn").on("click", function () {
            var o = table.checkStatus("pTable");
            if (o.data.length === 0) {
                layer.msg("至少选中一行");
                return false;
            }
            layer.confirm("您确定要删除选中的用户吗？", function () {
                var ids = "";
                $.each(o.data, function (index, item) {
                    if (ids) {
                        ids += ",";
                    }
                    ids += item.id;
                });
                $.post("/user/delete", {ids: ids}, function () {
                    layer.msg("删除成功");
                    $("#searchBtn").click();
                });
            });
        });

        //给查询按钮绑定事件
        $("#searchBtn").on("click", function () {
            //用js发起一个请求去要一些数据回来，要到之后把数据插入到table中
            //通过table组件渲染表格
            table.render({
                elem: "#pTable",
                url: "/user/list",
                cols: [[
                    {title: "选择", type: "checkbox"},
                    {title: "ID", field: "id"},
                    {title: "用户名", field: "username"},
                    {title: "姓名", field: "name"},
                    {title: "电话", field: "tel"},
                    {title: "操作", templet: "#template2"}
                ]],
                where: {username: $("#input1").val(), name: $("#input2").val(), status: $("#select1").val()},
                page: true,
                limits: [5, 10, 20],
                limit: 5
            });
        }).click();
        //

        //给新增按钮绑定事件
        $("#addBtn").on("click", function () {

            layer.open({
                title: "新增用户",
                type: 1,
                area: ['400px', '400px'],
                content: $("#template1").html()
            });
            upload.render({
                elem: "#avatarImg",
                url: "/attachment/upload",
                done: function (res, index, upload) {
                    if (res.code === 0) {
                        $("#avatarInput").val(res.data.filePath);
                        $("#avatarImg").attr("src", res.data.filePath);
                    }
                }
            });
            //绑定用户名框的blur事件
            $("#username").on("blur", function () {
                $.get("/user/check", {username: $("#username").val()}, function (u) {
                    if (u) {
                        layer.msg("用户名已重复");
                        $("#username").focus();
                    }
                })
            });
        });

        //新增和编辑的保存
        $("body").on("click", "#saveBtn", function () {
            var data = form.val("form1");
            $.post("/user/save", data, function () {
                layer.closeAll();
                layer.msg("保存成功");
                $("#searchBtn").click();
            });
        });

        //给表格操作绑定事件
        table.on("tool", function (obj) {
            var event = obj.event;
            var data = obj.data;
            if (event === "edit") {
                $.get("/user/" + data.id, function (user) {
                    layer.open({
                        title: "编辑用户",
                        type: 1,
                        area: ['400px', '400px'],
                        content: $("#template1").html()
                    });
                    $("#passwordDIV").remove();
                    $("#username").attr("readonly", true);
                    form.val("form1", user);
                });
            }
            if (event === "delete") {//说明点了删除
                layer.confirm("您确定要删除这个用户吗？", function () {
                    $.post("/user/delete", {ids: data.id}, function () {
                        layer.closeAll();
                        layer.msg("删除成功");
                        $("#searchBtn").click();
                    });
                });
            }
        });
    });
</script>
</body>
</html>
